<template>
    <view>
        <callWe></callWe>
        <!-- 产品图 -->
        <view class="topBody">
            <image :src="product.url" class="topImage" />
            <view class="downLoadProduct" @click="copyAnnex">下载附件</view>
        </view>
        <!-- 标题及内容 -->
        <view class="titleBody">
            <view class="title">
                {{ product.title }}
            </view>
            <view class="form">
                {{ product.form }}
            </view>
            <view class="infoTitle" :class="{ showInfoTitle: showInfoTitle, hideInfoTitle: !showInfoTitle }"
                @click="showInfoTitle = !showInfoTitle">
                <text v-for="(item, index) in product.info" :key="index">
                    {{ (index + 1) + '.' + item.title }}
                </text>
            </view>
        </view>
        <!-- 主体 -->
        <view class="contentBody">
            <scroll-view scroll-x class="pekTabs">
                <view v-for="item in activeList" :key="item.key" class="pekTab"
                    :class="{ pekTabActive: item.key == activeKey, pekTabOne: activeList.length == 1, pekTabTwo: activeList.length == 2, pekTabMore: activeList.length >= 3 }"
                    @click="activeKey = item.key">
                    <text>{{ item.title }}</text>
                </view>
            </scroll-view>
            <view class="pekContent">
                <view class="pekInfo" v-if="activeKey == 'info'">
                    <view class="pekInfoItem" v-for="(item, index) in product.info" :key="index">
                        <view class="pekInfoTitle">{{ item.title }}</view>
                        <view class="pekInfoContent">{{ item.content }}</view>
                    </view>
                    <view id="pekInfoMore">
                        获取更详细的产品信息，联系我们>
                    </view>
                </view>
                <view class="pekAccuracy" v-if="activeKey == 'accuracy'">
                    <image class="contentImage" @click="previewImg(product.accuracy)" :src="product.accuracy" />
                </view>
                <view class="pekStruct" v-if="activeKey == 'struct'">
                    <image class="contentImage" @click="previewImg(product.struct)" :src="product.struct" />
                </view>
                <view class="pekSpecs" v-if="activeKey == 'specs'">
                    <image class="contentImage" @click="previewImg(product.specs)" :src="product.specs" />
                </view>
                <view class="pekParam" v-if="activeKey == 'param'">
                    <image class="contentImage" @click="previewImg(product.param)" :src="product.param" />
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { get } from '../../static/js/request'
export default {
    data() {
        return {
            activeKey: '',
            // 显示列表 如果某个属性为空则不加入
            activeList: [],
            productId: '',
            product: {},
            showInfoTitle: false,
        }
    },
    onLoad(options) {
        if (!options.productId) {
            uni.showToast({
                title: '参数错误',
                icon: 'error',
                mask: true
            })
            uni.navigateBack({ delta: 1 })
            return
        }
        this.productId = options.productId
        this.inCreate()
    },
    methods: {
        //初始化页面
        inCreate() {
            this.getProduct()
        },
        //获取产品信息
        getProduct() {
            get("product/query?id=" + this.productId).then(res => {
                if (res.code != 200) {
                    uni.showToast({
                        title: '未找到对应数据',
                        icon: 'error',
                        mask: true
                    })
                    uni.navigateBack({ delta: 1 })
                    return
                }
                this.product = res.result
                console.log(this.product)
                this.product.info = JSON.parse(this.product.info)
                this.initActiveList()
            })
        },
        //初始化Tabs参数
        initActiveList() {
            this.activeList = [];
            if (this.product.info) {
                this.activeList.push({
                    title: '产品特点',
                    key: 'info'
                })
            }
            if (this.product.accuracy) {
                this.activeList.push({
                    title: '精度选择',
                    key: 'accuracy'
                })
            }
            if (this.product.specs) {
                this.activeList.push({
                    title: '精度规格',
                    key: 'specs'
                })
            }
            if (this.product.struct) {
                this.activeList.push({
                    title: '产品结构',
                    key: 'struct'
                })
            }
            if (this.product.param) {
                this.activeList.push({
                    title: '产品参数',
                    key: 'param'
                })
            }
            if (this.activeList.length == 0) {
                this.activeKey = ''
                return
            }
            this.activeKey = this.activeList[0].key
        },
        //预览图片
        previewImg(image) {
            let tempFilePaths = [image]
            uni.previewImage({
                urls: tempFilePaths,
                success: (result) => { },
                fail: (error) => { }
            })
        },
        copyAnnex() {
            if (this.product.annex == null) {
                uni.showToast({
                    title: '暂无附件',
                    icon: 'none',
                    mask: true
                })
                return;
            }
            wx.setClipboardData({
                data: this.product.annex,
                success: function (res) {
                    wx.getClipboardData({
                        success: function (res) {
                            uni.showToast({
                                title: '已复制下载链接',
                                icon: 'none',
                                mask: true
                            })
                        }
                    })
                }
            })
        }
    }
}
</script>

<style>
* {
    font-family: 微软雅黑, "Microsoft YaHei", SimHei, FangSong, Arial, Helvetica, sans-serif !important;
}

/* #region Tabs样式 */
.pekTabs {
    width: 100%;
    white-space: nowrap;
}

.pekTab {
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    padding: 12rpx 0;
    border-bottom: 1px solid rgb(226, 226, 226);
}


.pekTabActive {
    color: rgb(179, 6, 17);
}

.pekTabActive text {
    font-weight: bold;
    padding: 11rpx 0;
    border-bottom: 2px solid rgb(179, 6, 17);
}

.pekTabOne {
    width: 100%;
}

.pekTabTwo {
    width: 49%;
}

.pekTabMore {
    width: 33.3%;
}

/* #endregion */

.topBody {
    position: relative;
    width: 100%;
    height: 500rpx;
}

.downLoadProduct {
    position: absolute;
    bottom: 20rpx;
    right: 40rpx;
    text-align: center;
    padding: 10rpx 16rpx;
    font-size: 26rpx;
    color: white;
    letter-spacing: 4rpx;
    background: rgba(0, 0, 0, .2);
}

.topImage {
    background-image: url(http://www.peklm.cn/images/bg/content-1/bg-content-1-list.png);
    background-size: cover;
    width: 100%;
    height: 100%;
}

.titleBody {
    width: 93%;
    margin: 30rpx auto;
    padding: 8rpx;
    border: 1px solid rgb(226, 226, 226);
    border-radius: 10rpx;
    box-shadow: 2rpx 2rpx 2rpx rgb(226, 226, 226);
}

.title {
    font-size: 36rpx;
    font-weight: bold;
}

.form {
    font-size: 32rpx;
    font-weight: light;
    margin: 8rpx 0;
    color: #8a8a8a;
}

.infoTitle {
    font-size: 30rpx;
    margin-bottom: 8rpx;
}

.showInfoTitle {}

.showInfoTitle text {
    display: block;
}


.hideInfoTitle {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.contentImage {
    width: 750rpx;
    height: 1000rpx;
}

.pekInfo {
    width: 90%;
    margin: 0 auto;
}

.pekInfoItem {
    margin-top: 10rpx;
    margin-bottom: 20rpx;
}

.pekInfoTitle {
    font-weight: bold;
    margin: 6rpx 0;
}

.pekInfoContent {
    font-size: 28rpx;
    font-weight: light;
    line-height: 2;
}

#pekInfoMore {
    color: rgb(179, 6, 17);
    padding: 20rpx;
}
</style>